window.onload = function(){
	    //效果一：添加购物车弹窗  
	    var kong = document.getElementsByClassName('kong');
	    var shopping = document.getElementsByClassName('shopping');

    height=0;
	    function go(){     	    
   	    height += 10;
      if( height > 95){
         clearInterval(time);
         return;
      }
  
       shopping[0].style.height = height + 'px';
	    }

	    function up(){     	    
   	    height -= 10;
      if( height < 0 ){
         clearInterval(time1);
         return;
      }
  
       shopping[0].style.height = height + 'px';
	    }

	    // time = setInterval(go,1000);

	    kong[0].onmouseover = function(){
        // shopping[0].style.display = 'block';
        time = setInterval(go,20);                
	    }

	    kong[0].onmouseout = function(){
        // shopping[0].style.display = 'none';
        // clearInterval(time);
        // 
       time1 = setInterval(up,20);  
	    }


	    //效果二：轮播图
    var div_img =document.getElementById('div_img');
    var img = document.getElementsByClassName('img');

    num = 0;
    function run(){
    	//循环，把所有图片隐藏
    	for(var i=0;i<img.length;i++){
    		img[i].style.display = "none";
    		li_list[i].style.background = "#6B6B6B";
    	}
    	//把当前图片显示出来
    	img[num].style.display = "block";
        li_list[num].style.background = '#fff';

    	if(num==img.length-1){
    		num = 0;
    	}else{
    		num++;
    	}
    }

    //定时器
    time3 = setInterval(run,1000);

    //给#con  加事件  移进时停止    移出时自动转换图片
    var con = document.getElementById('con');
    var btn_left = document.getElementsByClassName('btn_left');
    var btn_right = document.getElementsByClassName('btn_right');
    con.onmouseover = function(){
    	//定位
    	btn_left[0].style.backgroundPosition = "0 0";
    	btn_right[0].style.backgroundPosition = "-42px 0";
    	clearInterval(time3);
    }
    con.onmouseout = function(){
    	btn_left[0].style.backgroundPosition = "-80px 0";
    	btn_right[0].style.backgroundPosition = "-120px 0";
    	time3= setInterval(run,1000);
    }

    //给li_list加点击事件
    var li_list = document.getElementsByClassName('li_list');

    //循环
    for(var i=0;i<li_list.length;i++){
    	//调用一个点击事件的方法
    	_list(i);
    }
    
    function _list(j){
    	li_list[j].onclick = function(){
    		num = j;
    		run();
        }
       
    }            
  


    //给左右按钮加点击事件
    btn_right[0].onclick = function(){
    	run();
    }
    btn_left[0].onclick = function(){
    	if(num==0){
    		num = img.length-2;      //img.length-2  = 3
    	}else if(num==1){   
    		num = img.length-1;
    	}else{
    		num -= 2;
    	}
    	run();
    }

    
    // 效果三：jq实现模块1_con_second_auto的功能
    // 当鼠标移到_con_second_left下面的li时，右边出现弹窗
    
     is_out = 0; //定个变量，默认是0不显示下拉框
    //鼠标移到小米手机上时，出现下拉框
    //先抓取元素  $('.mi_click')
    $('.mi_click').hover(function() {
       //当鼠标移到他上面时滑出下拉框
       $('#mi_phone').slideDown();      
    }, function() {
       //当鼠标离开时下拉框滑回原位
       // $('#mi_phone').slideUp();
       setTimeout(go_out, 2000); //设个临时定时器
    });
    
    //写个方法，当鼠标移到mi_click作用区域时，延时2秒收回下拉框
    function go_out(){
      //判断假如is_out==0,不显示下拉框
        if(is_out ==0){
          $('#mi_phone').slideUp();   //下拉框消失
        }     
    }

    $('.mi_click').hover(function() {
        
        is_out=1;   //当执行到这里的时候  不执行上面的go_out()方法，所以显示下拉框2秒
        
    }, function() {
      
      is_out=0;
      setTimeout(go_out,2000);
    });



    /*效果四：jq实现当鼠标移到li上面，从右边滑出弹框 */
    is_running = 0;
    $('.box_list').hover(function() {
        $(this).children('._img_right').show();
    }, function() {
        // $(this).children('._img_right').hide();
        setTimeout(running,2000);
    });
  
    function running(){
        if(is_running==0){
            $(this).children('._img_right').hide();
        }
    }

    $('.box_list').hover(function() {
        is_running=1;
    }, function() {
        is_running=0;
        setTimeout(running,2000);
    });



    // 给小米明星单品做溢出隐藏效果
    // JS实现溢出隐藏效果
    //移动panpin_img的left值1226px

    // var overflow = document.getElementsByClassName('overflow')[0];
    // //var danpin_img.style.marginLeft = '-1226px';
    // //每秒移动一次
    // var speed = 0;
    // var time2222 = setInterval(function(){ 
    //     speed +=250;     
    //     if(speed>=1226){
    //         clearInterval(time2222);
    //     }
    //     overflow.style.marginLeft = '-'+speed+'px';
       
    // },1000);


    //jq实现溢出隐藏效果
    long = 0;
    function longrun () {
        if(long==0){
          $('.overflow'). animate({left: '-1226px'}, 500)
          long=1;
        }else{
          $('.overflow'). animate({left: '0px'}, 500)
          long=0;
        }
    }

    time111= setInterval(longrun,1000);


    /*搭配*/
    /*功能5  鼠标移到div上时，从下往上滑出小窗口 */
    $('.func_last').hover(function() {
        $(this).animate({'top':'-3px'}, 100);
        $('.func').slideDown();  
    }, function() {
        $(this).animate({'top':'0px'},100);
        $('.func').slideUp();     
    });

    // 热评产品
    $('.php').hover(function() {
        //当鼠标移动到div上时，改变top值，实现窗口挪动效果
        $(this).animate({'top':'-5px'},50);
    }, function() {
        //鼠标离开，位置复原
        $(this).animate({'top':'0px'},50);
    });


    //内容
    //div移动
    $('.mysql').hover(function() {
        //当鼠标移动到div上时，改变top值，实现窗口挪动效果
        $(this).animate({'top':'-5px'},50);
    }, function() {
        //鼠标离开，位置复原
        $(this).animate({'top':'0px'},50);
    });
    //按钮
    var mysql = document.getElementsByClassName('mysql')[0];
    var oBtn1 = document.getElementsByClassName('btn11-left')[0];
    var oBtn2 = document.getElementsByClassName('btn11-right')[0];

    mysql.onmouseover = function(){
        oBtn1.style.opacity=1;
        oBtn2.style.opacity=1;
    }

    mysql.onmouseout = function(){
        oBtn1.style.opacity=0;
        oBtn2.style.opacity=0;
    }

    //图片溢出隐藏
  
    xbsnum = 0;  //声明一个变量，存数字或者数组  xbsnum = [0];
    function xbs_run(){
        left = xbsnum*-296;   //这里指移动位置是div大小296的整数个
        $('.longlong').animate({left:left+'px'},500);
        if(xbsnum==2){      //2=tttt.length   代表图片数量
            xbsnum = 0;
        }else{
            xbsnum++;
        }
    }
 
    xbs_time = setInterval(xbs_run,1000);



}
